<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>忘记密码-浮生若梦</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        .formstyle {
            background-color: white;
            opacity: 0.7;
            padding: 50px;
            border-radius: 10px
        }

        .col-center-block {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .beijing {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background: url("img/nier-gaosi.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            /*-webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);*/
            /*filter: blur(2px);*/
        }

        .two {
            width: 50%;
            height: auto;
            float: left;
            box-sizing: border-box;
        }

        .a {
            color: #999898;
        }

        a:hover {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div th:replace="part/nav ::nav"></div>
<div class="beijing"></div>
<div class="col-md-4 col-lg-4 col-lg-offset-4 col-md-offset-4 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 col-center-block formstyle">
    <div align="center" style="margin-bottom: 5%;">
        <h3><b>忘记密码</b></h3>
    </div>
    <form action="/forgetPassword.htm" method="post" id="login_form">
        <div class="form-group input-group input-group-lg" style="height: 50%">
            <span class="input-group-addon" id="email">你的邮箱</span>
            <span>
                <input type="email" id="userEmail" name="userEmail" class="form-control form-horizontal"
                       placeholder="点击验证按钮向这个邮箱发送验证码"
                       aria-describedby="sizing-addon1" onchange="isEmail()">
                <a class="form-control form-horizontal btn btn-default" onclick="sendEmail()">验证</a>
            </span>
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon">新的密码</span>
            <input type="password" id="password1" name="password" class="form-control"
                   placeholder="输入新密码"
                   aria-describedby="sizing-addon1">
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon">确认密码</span>
            <input type="password" id="userPassword" name="userPassword" class="form-control"
                   placeholder="再次输入一次"
                   aria-describedby="sizing-addon1">
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="verify">邮箱验证</span>
            <input type="text" name="verifyCode" id="verifyCode" class="form-control" placeholder="请输入邮箱验证码"
                   aria-describedby="sizing-addon1" onchange="verifyCodeF()">
        </div>
        <div align="center" style="padding-top: 5px">
            <button class="btn btn-default" type="button" onclick="toSubmit()">修改</button>
            <button type="reset" class="btn btn-default">重置</button>
        </div>
    </form>
</div>
<script>
    function isEmail() {
        var email = $("#userEmail").val();
        var reg = /^\s*\w+(?:\.{0,1}[\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\.[a-zA-Z]+\s*$/;
        if (email == "") {
            alert("账号不能为空");
            return false;
        }
        var bool = reg.test(email);
        var flag = false;
        if (bool) {
            // ajax     判断 邮箱是否 已存在
            $.ajax({
                cache: false,
                async: false,
                type: 'post',
                url: "/verifyEmail.htm",
                data: {'email': email},
                success: function (res) {
                    //alert(res);
                    //不允许在  succcess这个 函数里  直接 写 return
                    if (res) {
                        flag = false;
                    } else {
                        flag = true;
                    }
                }
            });
            /////根据当前flag值  判断    div 提示
            if (!flag) {
                alert("用户不存在！");
            }
            return flag;

        } else {
            alert("账号格式不正确!请使用正确的邮箱！");
            return false;
        }
    }

    function sendEmail() {
        var email = $("#userEmail").val();
        var bool = true;
        if (isEmail()) {
            $.ajax({
                cache: false,
                async: false,
                type: 'post',
                url: "/verifyForgetSendTime.htm",
                success: function (res) {
                    if (!res) {
                        bool = false;
                        alert("已发送一封，发下一封得等一分钟。");
                    }
                }
            });
        }
        if (!bool) {
            return false;
        }
        if (isEmail()) {
            $.ajax({
                cache: false,
                async: true,
                type: 'post',
                url: "/sendForgetEmail.htm",
                data: {'email': email}
            });
            alert("验证码，发送完成，注意邮箱查收");
        } else {
            alert("这个邮箱不存在！");
        }
    }

    function isPassword1() {
        var pwd = $("#password1").val();
        if (pwd == "") {
            alert("密码不能为空!");
            return false;
        }
        return true;
    }

    function isPassword2() {
        var pwd1=$("#password1").val();
        var pwd2=$("#userPassword").val();
        if (isPassword1()){
            if (pwd1==pwd2){
                return true;
            }
            alert("两次密码不一致！")
        }
        return false;
    }

    function toSubmit() {
        if (isEmail() && isPassword2()) {
            document.getElementById("login_form").submit();
        }
    }
</script>
</body>
</html>